<script lang="ts">
import { defineComponent, ref, watch, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getUserLike } from '../api/User'
import { viewCount, filters, vidotime } from '../hooks/filters'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
import { useScroll } from '../hooks/useScroll'
import { getlikkk } from '../api/userInfoView'


export default defineComponent({
    components: {},
    props: ['useractive'],

    setup(props) {
        const store = useCounterStore()
        const { likearr, idarr, collectlikearr } = storeToRefs(store)
        // 作为 action 的 increment 可以直接解构
        const { unlikeFuns, likeFuns, increment, incrementfalse, collectFuns, uncollectFuns } = store;
        let useractive = props.useractive;
        let router = useRouter();
        let route = useRoute();
        let active = ref(null);
        let userid: any = window.localStorage.getItem("userId")
        let userLikeList: any = ref([]);

        let page: number = 1;
        let scrollTop = ref<number>(document.documentElement.scrollTop);
        let isbottom = ref(false);
        let isloading: any = ref(false);
        let total: any = ref();

        let click_user = (id: any) => {
            console.log("点击了头像", id);
            router.push({
                path: '/userdetail',
                query: {
                    userid: Number(id),
                }
            })
        }
        let click_video = (videoid: any, video_library_id: any) => {
            router.push({
                path: '/videoDes',
                query: {
                    aid: videoid,
                    mid: video_library_id,
                    useractive,
                    userid,
                }
            })
        }
        let likearrs: any = JSON.parse(window.localStorage.getItem("likearr")) || []
        let rras = likearrs.filter((item: any) => {
            console.log(String(item).length)
            return String(item).length > 5
        });
        let mylikevideolist: any = ref([]);

        let like: any = (id: any) => {
            likeFuns(id);
            // likearrs.value = JSON.parse(window.localStorage.getItem('likearr'));

        }
        // 取消关注
        let unlike: any = (id: any,index:any) => {
            unlikeFuns(id);
            mylikevideolist.value.splice(index, 1);
            console.log('22222', rras);
            // getlikkkFun();
        };
        // 获取喜欢的视频
        let getlikkkFun = () => {


            console.log(rras);
            rras.forEach((items: any) => {
                getlikkk(items).then((data: any) => {
                    mylikevideolist.value.push(data)
                    console.log("总数据", mylikevideolist.value);

                });




            })
        }
        let getUserLikeFun = (userid: any) => {
            console.log(userid)
            getUserLike(userid, { page }).then((data) => {
                console.log('用户喜欢data=>', data);
                total.value = data.data.total;
                data.data.list.forEach((item: any) => {
                    userLikeList.value.push(item)
                })
                // userLikeList.value = data.data.list
                console.log('用户喜欢userLikeList=>', userLikeList.value)
            })
        };
        let onscroll = () => {
            scrollTop.value = document.documentElement.scrollTop;
            isbottom.value = useScroll(document.documentElement).scrollListenerHandler();
            console.log('9999999999999', isbottom.value)
        }
        watch(isbottom, () => {
            console.log(page * 10, total.value)
            if (page * 10 >= total.value) {
                console.log(111111111);
                return;
            }
            if (isbottom.value) {
                page += 1;
                isloading.value = true;
                console.log('222222222page=>', page);

                console.log('isloading', isloading.value);
                setTimeout(() => {
                    isloading.value = false;
                    console.log('222222222page=>', page);
                    getUserLikeFun(userid);

                }, 500)

            }

        })
        onMounted(() => {
            getlikkkFun()
            getUserLikeFun(userid);
            window.addEventListener('scroll', onscroll);

        })
        onUnmounted(() => {
            window.removeEventListener('scroll', onscroll)
        })
        console.log(active)

        return {
            active,
            click_user,
            click_video,
            userLikeList,
            filters,
            viewCount,
            vidotime,
            idarr,
            likearr,
            collectlikearr,
            unlikeFuns,
            likeFuns,
            increment,
            incrementfalse,
            collectFuns,
            uncollectFuns,
            isloading,
            total,
            mylikevideolist,
            like,
            unlike
        }
    }
})
</script>
<template>
    <div style="min-height: 667px;background-color: #f7f7f7;">
        <div class="desbar">
            <span class="iconfont icon-xiangzuojiantou" @click="$router.back()"> </span>
            <h2>我的喜欢</h2>
        </div>
        <div class="userLike" v-if="userLikeList && mylikevideolist">
            <p v-if="userLikeList.total == 0">还没有喜欢哦~</p>

            <!-- 用户喜欢列表 -->
            <div class="userLikeList" v-else>



                <!-- 自己喜欢的 -->
                <ul>
                    <li @click.stop="click_video(article.data.id, article.data.vid)"
                        v-for="(article, index) in mylikevideolist" :key="index">
                        <div class="content">
                            <div class="user">
                                <div class="uer_left">
                                    <div class="user_image" @click.stop="click_user(article.data.author.userinfo.id)">
                                        <img :src="article.data.author.userinfo.avatar" />
                                    </div>
                                    <div class="user_name">
                                        {{ article.data.author.userinfo.username }}
                                        <span v-if="article.data.team.length != 0">等<em>{{ article.data.team.length
                                        }}</em>位创作人</span>
                                    </div>
                                </div>
                                <div class="user_right">
                                    <!-- 关注 -->
                                    <div class="addfollow" @click.stop="increment(article.data.author
                                        .userinfo.id)" v-if="!idarr.includes(article.data.author.userinfo.id)">+ 关注
                                    </div>
                                    <div class="addfollow" @click.stop="incrementfalse(article.data.author.userinfo.id)"
                                        v-else>已关注
                                    </div>
                                    <div class="logo"><span class="iconfont icon-gengduo"></span></div>
                                </div>
                            </div>
                            <div class="word">{{ article.data.title }}</div>
                            <div class="video">
                                <!-- <img src="../assets/images/swiper1.webp" /> -->
                                <img :src="article.data.cover" />
                                <!-- <div class="mask">13.1w观看 | 04'04''</div> -->
                                <div class="voice">
                                    <span class="iconfont icon-guanbiyinliang"></span>

                                </div>
                                <div class="mask">{{ viewCount(article.data.count.count_view) }}观看 <span
                                        style="margin:0 5px">|</span>
                                    {{ vidotime(article.data.duration) }}</div>
                            </div>
                            <div class="bottom">
                                <ul>

                                    <!-- 收藏 -->
                                    <li @click.stop="collectFuns(article.data.id)"
                                        v-if="!collectlikearr.includes(article.data.id)"><span
                                            class="iconfont icon-31shoucang"></span>{{
                                                filters(article.data.count.count_collect) }}
                                    </li>
                                    <li @click.stop="uncollectFuns(article.data.id)" v-else><span
                                            class="iconfont icon-wodeshoucang" style="color: yellow"></span>{{
                                                filters(article.data.count.count_collect + 1) }}
                                    </li>

                                    <!-- <li>
                                <span class="iconfont icon-31shoucang"></span>{{ filters(article.data.count.count_collect) }}
                              </li>
                               -->
                                    <li>
                                        <span class="iconfont icon-review"></span>{{
                                            filters(article.data.count.count_comment)
                                        }}
                                    </li>


                                    <li @click.stop="like(article.data.id)" v-if="!likearr.includes(article.data.id)">
                                        <span class="iconfont icon-dianzan"></span>{{
                                            filters(article.data.count.count_like) }}
                                    </li>
                                    <li @click.stop="unlike(article.data.id,index)" v-else><span
                                            class="iconfont icon-dianzan_kuai " style="color: red;"></span>{{
                                                filters(article.data.count.count_like + 1) }}</li>

                                    <!-- <li>
                                <span class="iconfont icon-dianzan_huaban"></span>{{ filters(article.resource.count.count_like) }}

                              </li> -->
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>




            </div>
            <van-loading size="24px" v-if="userLikeList.length != total && isloading"
                style="text-align: center;line-height:40px;">加载中...</van-loading>
            <em style="text-align: center;font-size: 14px;line-height:40px;color: #a5a5a5;"
                v-if="userLikeList.length == total">暂无更多了~</em>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.desbar {
    display: flex;
    line-height: 44px;
    padding: 0 10px;
    position: sticky;
    z-index: 10;
    top: 0;
    background-color: #fff;

    span {
        font-size: 18px;
        font-weight: 600;
    }

    h2 {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;

        // margin-left: 50px;
    }
}

.userLike {
    background-color: #f7f7f7;

    &>p {
        font-size: 14px;
        width: 100%;
        height: 302px;
        line-height: 302px;
        text-align: center;
        color: #bbbbbb;
    }

    .userLikeList {
        padding-top: 7px;
        background-color: #f7f7f7;

        &>ul {
            &>li {
                background-color: #fff;
                //   width: 100%;
                // height: 320px;
                border-radius: 10px;
                border-top: 0.1px solid transparent;
                margin: 0 12px;
                margin-bottom: 12px;

                .content {
                    .user {
                        padding: 0 12px;
                        margin-top: 12px;
                        display: flex;
                        justify-content: space-between;

                        .uer_left {
                            display: flex;

                            .user_image {
                                margin-right: 5px;

                                img {
                                    border-radius: 50%;
                                    width: 32px;
                                    height: 32px;
                                }
                            }

                            .user_name {
                                font-size: 12px;
                                color: #484848;
                                line-height: 32px;

                                span {
                                    color: #767676;

                                    em {
                                        color: #1c1c1c;
                                        font-weight: 600;
                                        font-style: normal;
                                        margin-left: 4px;
                                    }
                                }
                            }
                        }

                        .user_right {
                            display: flex;

                            .addfollow {
                                color: #eb4b3a;
                                font-size: 12px;
                                margin-right: 19px;
                                font-weight: 600;
                            }

                            .logo {
                                span {
                                    color: #8a8a8a;
                                }
                            }
                        }
                    }

                    .word {
                        padding: 0 12px;
                        font-size: 14px;
                        color: #282828;
                        font-weight: 600;
                        line-height: 31px;
                    }

                    .video {
                        position: relative;

                        //   padding:0 12px;
                        img {
                            width: 100%;
                            height: 199px;
                            display: flex;
                        }

                        .mask {
                            position: absolute;
                            bottom: 0;
                            right: 0;
                            color: #fff;
                            font-size: 12px;
                            margin-right: 12px;
                            line-height: 30px;
                        }

                        .voice {
                            position: absolute;
                            bottom: 10px;
                            left: 12px;
                            color: #fff;

                            span {
                                font-size: 18px;
                            }
                        }
                    }

                    .bottom {
                        height: 40px;

                        &>ul {
                            display: flex;
                            height: 100%;
                            align-items: center;

                            &>li {
                                width: 33.33%;
                                text-align: center;
                                line-height: 44px;
                                font-size: 12px;
                                display: flex;
                                align-items: center;
                                justify-content: center;

                                span {
                                    margin-right: 7px;
                                    font-size: 20px;
                                    color: #6a6869;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.userLike>em {
    display: inline-block;
    width: 100%;
    font-size: 14px;
    color: #bbbbbb;
    text-align: center;
    line-height: 40px;
    background-color: #f7f7f7;
}
</style>